<template>
  <div>
    <nav-header :navBgColor="'#fff'" :isNext="false" :isNavBack="false" :isNavClose="true"></nav-header>
    <div class="nav-height"></div>
    <div class="fluencer-login">
      <p class="title">手机号注册/登录</p>
      <div class="form-box">
        <input
          class="form-phone"
          type="tel"
          name
          id
          placeholder="手机号码"
          v-model="phone"
          @input="inputPhone"
          maxlength="11"
        />
        <span
          class="btn-gainCode"
          :class="{active:isCanGainCode}"
          @click.stop="tap2gainCode"
        >{{codeString}}</span>
      </div>
      <div class="form-box">
        <input class="form-code" type="text" name id placeholder="短信验证码" v-model="code" />
      </div>
      <p class="tips">
        注册/登录即代表同意
        <a @click="goHref(1)" style="color:#FE2525;">《BWRM服务协议》</a>
        <a  @click="goHref(2)" style="color:#FE2525;" >《平台隐私政策》</a>
      </p>
      <van-button :disabled="isDisabled" class="form-btn" type="default" @click="tap2Login">注册/登录</van-button>
      <!-- <div class="other-way">
        <p class="other-way-tips">其他登录方式</p>
        <img src="" alt="">
      </div>-->
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import navHeader from "@/components/NavHeader";
import mixin from "@/utils/mixin";
import { Button, Toast } from "vant";
Vue.use(Button).use(Toast);

export default {
  name: "infLogin",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      phone: "",
      code: "",
      isDisabled: true,
      isCanGainCode: false,
      codeString: "获取验证码",
      regExtendField:""
    };
  },
  mounted() {
    
  },
  methods: {
    goHref(type){
      let url,title;
      if(type==1){
        url='http://ossfile.wechatrenmai.cn/protocol/service.html';
        title = "BWRM服务协议" ;
      }else{
        url='http://ossfile.wechatrenmai.cn/protocol/privacy.html';
        title = "平台隐私政策" ;
      }
      this.$router.push({
        path:"/otfile/mockView",
        query:{
          url:url,
          title:title
        }
      })
    },
    inputPhone() {
      if (this.checkIsPhone(this.phone)) {
        this.isDisabled = false;
        this.isCanGainCode = true;
      } else {
        this.isDisabled = true;
        this.isCanGainCode = false;
      }
    },
    // 获取验证码
    tap2gainCode() {
      if (!this.checkIsPhone(this.phone)) {
        Toast.fail("请输入正确的手机号码！");
        return false;
      }
      this.isCanGainCode = false;
      let timeDown = 60;
      this.codeString = timeDown + " 秒";
      this.$http.post("user/sendVerificationCode", { telNum: this.phone }).then(
        res => {
          Toast.success(res.head.msg);
          let timeOut = setInterval(() => {
            timeDown--;
            if (timeDown <= 0) {
              this.isCanGainCode = true;
              this.codeString = "获取验证码";
              window.timeOut = null;
              window.clearInterval(timeOut);
              return false;
            }
            this.codeString = timeDown + " 秒";
          }, 1000);
        },
        err => {
          this.isCanGainCode = true;
          this.codeString = "获取验证码";
          Toast.fail(err.header.msg);
          console.log(err);
        }
      );
    },
    // 登录注册
    tap2Login() { 
      if (!this.checkIsPhone(this.phone)) {
        Toast.fail("请输入正确的手机号码！");
        return false;
      }
      if (!this.code) {
        Toast.fail("请输入短信验证码！");
        return false;
      }
      this.$bridge.callHandler('getRegExtendField',{},(regExtendField)=>{
        if(regExtendField && regExtendField.length > 0){
          this.regExtendField = regExtendField; 
        }else{
          this.regExtendField = "" ;
        } 
        let sendData = {
          telNum: this.phone,
          code: this.code,
          platformRole: 2,
          regExtendField:this.regExtendField
        };
        this.$http.post("user/login", sendData).then(
          res => {
            window.localStorage.setItem( "uniqueIdByInfluencer", res.data.flowUniqueId);
            window.localStorage.setItem("platformRole", 2); 
            let parmars_bri = {
              uniqueId: res.data.flowUniqueId,
              adUniqueId:( res.data.adUniqueId?res.data.adUniqueId:"0")
            };
            this.$bridge.callHandler("loginRoler", parmars_bri, res => {
              console.log(res);
            });
            Toast({
              type: "success",
              message: "登录成功！",
              onClose: () => {
                if (res.head.code == 124) {
                  this.$router.replace("/infLogin/improveInfo");
                } else {
                  window.localStorage.userInfoImproved = 1;
                  this.$router.replace("/infIndex/index");
                }
              }
            });
          },
          err => {
            Toast.fail("登录失败，请重新登录！");
            console.log(err);
            return false;
          }
        );
      });
    }
  }
};
</script>

<style scoped lang="scss">
.fluencer-login {
  width: 674px;
  margin: auto;
  .title {
    font-size: 48px;
    font-family: PingFangSC-Semibold;
    font-weight: 700;
    color: rgba(48, 49, 51, 1);
    line-height: 67px;
    margin: 32px 0 64px;
  }
  .form-box {
    width: 590px;
    height: 88px;
    padding: 0 32px;
    font-size: 32px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(48, 49, 51, 1);
    line-height: 88px;
    background: rgba(237, 237, 237, 1);
    border-radius: 44px;
    margin-bottom: 32px;
    position: relative;
    input {
      background: rgba(237, 237, 237, 1);
      outline: none;
      border: none;
    }
    .form-phone {
      width: 390px;
      height: 100%;
    }
    .btn-gainCode {
      height: 45px;
      line-height: 45px;
      padding: 0 0 0 32px;
      font-size: 32px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(129, 129, 129, 1);
      border-left: 1px solid rgba(129, 129, 129, 1);
      position: absolute;
      top: 0;
      bottom: 0;
      right: 32px;
      margin: auto;
    }
    .btn-gainCode.active {
      color: rgba(255, 37, 37, 1);
      border-left: 2px solid rgba(255, 37, 37, 1);
    }
    .form-code {
      width: 100%;
      height: 100%;
    }
  }
  .tips {
    font-size: 24px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(129, 129, 129, 1);
    line-height: 34px;
    text-align: center;
    a {
      font-size: 24px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(129, 129, 129, 1);
      line-height: 34px;
    }
  }
  .form-btn {
    display: block;
    width: 654px;
    height: 88px;
    font-size: 32px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 88px;
    background: rgba(254, 37, 37, 1);
    border-radius: 44px;
    margin: 64px auto 0;
    text-align: center;
  }
  .other-way {
    width: 100%;
    font-size: 26px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(129, 129, 129, 1);
    line-height: 37px;
    text-align: center;
    position: fixed;
    bottom: 290px;
    left: 0;
    img {
      width: 100px;
      height: 100px;
      margin-top: 32px;
    }
  }
}
</style>